
import React, { useState, useMemo } from 'react';

const slow = () => {
	const [count, setCount] = useState(0);
	const Slow2 = useMemo(() => {
		return <Slow age={count} name="wangss" />;
	}, []);

	return (
		<div>
			<span>{count}</span>
			<button className='w-30 p-2 bg-red-400 text-white' onClick={() => setCount(count + 1)}>increase</button>
			{/* {Slow2} */}
			<button onClick={() => {
				async function c() {
					const r = await fetch('/api/hello');
					const r2 = await r.json();
					console.log(r2, r.name);
				}
				c();
			}}> getName </button>
		</div>
	);
};

function Slow({ age = 9, name = "wang" }: { age?: number; name: string; }) {
	const now = performance.now();
	while (performance.now() - now < 1000) { }

	console.log("slow rended");
	return (
		<div>
			{age}

			<div>{name}</div>
		</div>
	);
}


export default slow;